<%--
  Created by IntelliJ IDEA.
  User: 孙伟业
  Date: 2020/6/1
  Time: 9:13
  To change this template use File | Settings | File Templates.
--%>
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false"  %>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>concernlist</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/bootstrap-responsive.min.css" rel="stylesheet">
    <link href="../css/site.css" rel="stylesheet">
    <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

    <style>
        .space{
            margin-bottom: 30px;
        }

        .tip{
            color: red;
            float: right;
        }
        table td{
            border-color: #7a5a21;
             border:0px;
         }
        table tr{
            border:0px;
        }
    </style>

</head>

<body>

<script src="../js/jquery.min.js"></script>

<div class="container">
    <div class="navbar">
        <div class="navbar-inner">
            <div class="container">

                <div class="nav-collapse">
                    <ul class="nav">
                        <li class="active">
                            <a href="a.html">我的</a>
                        </li>
                        <li>
                            <a href="settings.htm">版块二</a>
                        </li>
                        <li>
                            <a href="help.htm">板块三</a>
                        </li>
                    </ul>

                    <form class="navbar-search pull-left" action="">
                        <input type="text" class="search-query span2" placeholder="Search" />
                    </form>

                    <ul class="nav pull-right">
                        <li>
                            <a href="">${user.userName}</a>           <%-- 这种写法    <%=session.getAttribute("username")%>   --%>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="span3">
            <div class="well" style="padding: 8px 0;">
                <ul class="nav nav-list">
                    <li>
                        <a href="http://localhost:8888/forum/4_user/a.jsp"><i class="icon-black icon-home"></i> 首页</a>
                    </li>
                    <li>
                        <a href="http://localhost:8888/forum/4_user/dongtai.jsp"><i class="icon-folder-open"></i> 动态</a>
                    </li>
                    <li>
                        <a href="http://localhost:8888/forum/4_user/collect.jsp"><i class="icon-folder-open"></i> 收藏</a>
                    </li>
                    <li  class="active">
                        <a href="http://localhost:8888/forum/4_user/concernlist.jsp"><i class="icon-envelope"></i> 关注</a>
                    </li>
                    <li class="divider">
                    <li>
                        <a href="http://localhost:8888/forum/4_user/concernedlist.jsp"><i class="icon-envelope"></i> 粉丝</a>
                    </li>
                    <li>
                        <a href="http://localhost:8888/forum/4_user/personalInformation.jsp"><i class="icon-user"></i> 个人资料</a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="span9">
            <h1>
                我的关注
            </h1>
            <hr>
            <%--<button type="button" class="btn btn-info" onclick="show()">显示</button>--%>

            <table id="concernlist" style=" border: 0px;  border-spacing:0px 10px;">

            </table>



            <script src="../jquery/jquery-3.4.1.js"></script>

            <script>

                function show() {
                    $.ajax({
                        url:'/forum/concern/selectByConcerningId?concerningId=1',
                        dataType:"json",
                        type:"get",
                        success:function (data) {
                            console.log(data)
                            showInfo(data)
                        }
                    })
                }

                function showInfo(jsonObj){
                    console.log(jsonObj)
                    var html = ''
                    for(var i = 0; i < jsonObj.length; i ++){
                        html = html + "<tr><td>"
                        html = html + jsonObj[i].concernedId
                        html = html + "</td><td style='float: right'>"
                        html = html + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
                        html = html + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
                        html = html + '<button style="float: right" class="btn btn-default" type="submit">取消关注</button><br><br>'
                        html = html + "</td></tr> "
                    }

                    var table = document.getElementById("concernlist");
                    // innerHTML会解析后面字符串中的html标签
                    table.innerHTML = html
                }

                show()

            </script>

        </div>


    </div>
</div>

</body>
</html>
